<template>
    <!--
    v-show 和 v-if 的操作：
    语法：v-show="vue变量名" v-if="vue变量名"
    两者之间的区别：
    v-show: 是通过css样式改变当前元素 如果是隐藏内部是通过display:none 来实现的
    使用场景： 在按钮或者经常折叠的情况下使用v-show是最方便
    v-if: 是通过真实的Dom标签来删除和创建的，所以性能会比v-show差

-->
    <h1>v-show='布尔类型' 和v-if的操作</h1>
    <div v-show="isShow">v-show的盒子模型</div>
    <div v-if="isShow"> v-if的盒子模型</div>
    <div>
        <p v-if="age>=18">我成年了！可以进网咖了</p>
        <p v-else-if="age >16">回家在吃一年饭</p>
        <p v-else>未成年止步</p>

    </div>
</template>
<script>
export default {
    data() {
        return {
            isShow: false,
            age:15
        }
    }
}

</script>